<template>
  <div class="wrapper">
    <!-- <el-upload
    ref="upload"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :limit="1"
    :on-exceed="handleExceed"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="success">上传安装包</el-button>
    </template>
  </el-upload> -->
    <div class="item" v-for="(item, index) in state.list" :key="index">
      <div class="left">
        <div class="head">
          <img
            :src="item.logo"
            alt=""
            class="logo"
          />
          <div class="info">
            <div class="name">{{ item.name }} ({{ item.plugin }})</div>
            <div class="version">{{ item.version }}</div>
          </div>
        </div>
        <div class="body">
          <div class="description">{{ item.description }}</div>
        </div>
      </div>
      <div class="right">
        <div class="opration">
          <div class="install button" @click="install(item.plugin)">
            <el-icon><Coin /></el-icon> <span class="ml-2">{{ item.install ? '更新':'安装' }}</span>
          </div>
          <div class="auth button" v-if="item.is_auth" @canplay="a">
            <el-icon><Sell /></el-icon> <span class="ml-2">授权</span>
          </div>
          <div class="disabled button" v-if="item.status == 'enable'" @click="disable(item.plugin)">
            <el-icon><TurnOff /></el-icon> <span class="ml-2">禁用</span>
          </div>
          <div class="active button" v-if="item.status == 'disable' && item.install" @click="enable(item.plugin)">
            <el-icon><Open /></el-icon> <span class="ml-2">启用</span>
          </div>
        </div>
      </div>
    </div>

    <el-empty description="您还没有安装应用" v-if="state.list.length <=0" />
  </div>
</template>
  <script setup>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
import { reactive, ref, computed, nextTick } from "vue";
import feedback from "@/lnk/utils/feedback";

const state = reactive({
  list: [],
});

const getList = async () => {
  const res = await api.plugin.list();
  state.list = res.data.list;
};

// 安装
const install = async (plugin) => {
  await feedback.confirm(
    "您确定安装【" + plugin + "】安装前请做好数据备份，以免造成不必要的数据丢失"
  );
  feedback.loading("安装中...");
  const res = await api.plugin.install({ plugin });
  if (res.error == 0) {
    feedback.closeLoading();
    feedback.notifySuccess(res.msg);
  }
};


// 启用
const enable = async (plugin) => {
  
  const res = await api.plugin.enable({ plugin });
  if (res.error == 0) {
    feedback.closeLoading();
    feedback.notifySuccess(res.msg);
    getList()
    }
};

// 禁用
const disable = async (plugin) => {
  const res = await api.plugin.disable({ plugin });
  if (res.error == 0) {
    feedback.closeLoading();
    feedback.notifySuccess(res.msg);
    getList()
  }
};

getList();
</script>

  <style lang="scss" scoped>
.wrapper {
  .item {
    margin-bottom: 10px;
    background-color: var(--el-bg-color);
    padding: 15px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border:1px solid var(--el-menu-border-color);
    min-height: 180px;
    .left {
      .head {
        display: flex;

        .logo {
          width: 50px;
          height: 50px;
          border: 1px solid var(--el-menu-border-color);
          border-radius: 4px;
          overflow: hidden;
          background: #bec0bf;
        }
        .info {
          margin-left: 10px;
          .name {
            font-weight: bold;
          }
          .version {
            color: #8a8f8d;
          }
        }
      }
      .body {
        margin-top: 10px;
        .description {
          color: #8a8f8d;
          font-size: 13px;
        }
      }
    }
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      .opration {
        display: flex;
        @media (max-width: 768px) {
            margin-top: 10px;
        }
       
        .button {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 4px 15px;
          font-size: 15px;
          font-weight: 500;
          border-radius: 4px;
          &:not(:first-child){
            margin-left: 10px;
          }
          
        }
        .install {
          color: #fc4b6c !important;
          background-color: #fdf3f5 !important;
        }
        .auth{
            background-color: #ebfaf2!important;
            color: #39cb7f!important;
        }
        .active{
            background-color: #ddebff!important;
            color: #1e4db7!important;
        }
        .disabled{
            background-color: #f6f8fb!important;
            color: #6c757d!important;
        }
      }
    }
  }
}
</style>